<!-- 记事本组件 -->
<template>
  <div class='Notepad'>
    <h2>记事本</h2>
    <input type="text" placeholder="请输入内容" 
    v-model="notepad.content" 
    @keyup.enter="save"/>
    <div>
      <div>
        <h3>未完成任务</h3>
      </div>
      <div>
        <h3>已完成任务</h3>
      </div>
      <div>
        <h3>已取消任务</h3>
      </div>
        <ul>
            <li v-for="n in notepads" :key="n.id">
                {{n.id}}
                {{n.content}}
                {{n.type}}
                {{n.createTime}}
                <button>删除</button> <button>完成</button>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        cid:1,//起始id
        notepad:{
          id:"",
          content:"",
          type:"",
          createTime:"",
          updateTime:"",
        },//记事本
        notepads:[],//记事本数据集合
      };
    },
    //方法集合
    methods: {
      //点击完成按钮
      okClick(id){
        console.log(id+"---------------");
        const note = this.notepads.find((n) => n.id == id);
        if(note){
          note.type=2;
        }
      },
      save(){
        //保存用户输入信息
        console.log("保存方法触发" + this.notepad.content);
        if(this.notepad.content==""){
          alert('请输入内容!');
        }else{
          this.notepad.id=this.cid;
          this.notepad.type=1; //1：未完成  2.已完成  3.已取消
          this.notepad.createTime=new Date();
          this.notepad.push(this.notepad);
          //清空数据
          this.notepad={};
          this.cid++;//id自增
        }
      },
      //获取所有未完成的任务
      getUnfinished(){
        return this.notepads.filter((n)=>n.type==1)
      },
      //获取所有完成的任务
      getfinished(){
        return this.notepads.filter((n)=>n.type==2)
      },
      //获取所有取消的任务
      getCancel(){
        return this.notepads.filter((n)=>n.type==3)
      },
    },
    computed:{
      //获取所有未完成的任务
      getUnfinished(){
        this.getUnfinished();
      },
      //获取所有完成的任务
      getfinished(){
        this.getfinished();
      },
      //获取所有取消的任务
      getCancel(){
        this.getCancel();
      },
    }
}
</script>
<style  scoped>

</style>